<script setup lang="ts">
import { defineProps, PropType, ref } from '@vue/runtime-core';
import { SheetItem } from './answer_sheet'
import { Question, EmptyQuestion, get_question, Option,update_answer } from './question'


const question_map = ref(new Map as Map<number, Question>)
// question_map.value.set(-1,EmptyQuestion)
const cur_index=ref(0)
let question_id_list: number[] = []
const cur_question = ref<Question>(EmptyQuestion)
const is_loading = ref(true)
const show_answer = ref(false)
const selected_option = ref('')
const selected_options = ref<string[]>([])
const is_answer_right = computed(() => {
    return user_answer.value == cur_question.value.answer
})


const props = defineProps({
    questions: {
        type: Array,
        default: [],
    },
    start: {
        type: Number,
        default: 0,
    }
})
const clean_user_answer=()=>{
    show_answer.value=false
    selected_options.value=[]
    selected_option.value=''

}

const set_user_answer=(question:Question)=>{
    if (!question.user_answer) {
        return
    }
    if (question.question_type==1) {
        selected_option.value=question.user_answer
    }else{
        selected_options.value=question.user_answer.split(',')
    }
    show_answer.value=true
}
const pick_question = async (index: number) => {
    console.log('Pick question index:',index)
    clean_user_answer()
    is_loading.value = true
    if (!question_map.value.has(index)) {
        const q = await get_question(question_id_list[index])
        question_map.value.set(index, q)
        console.log('Exam get question:',question_id_list[index])
        console.dir(q)
        cur_question.value = q
    } else {
        cur_question.value = question_map.value.get(index) || EmptyQuestion
        set_user_answer(cur_question.value)
    }
    is_loading.value = false
}
const submit_answer=async ()=>{
    const qid=cur_question.value.id
    const is_right=is_answer_right.value
    await update_answer(qid,is_right)
}
const user_answer = computed(() => {
    if (cur_question.value.question_type == 1) {
        return selected_option.value
    } else {
        return selected_options.value.join(',')
    }
})

onMounted(() => {
    console.log('Exam mouted, props:')
    console.dir(props)
    cur_index.value = +props.start
    props.questions.forEach(item => question_id_list.push(parseInt(item)))
    pick_question(cur_index.value)
})
const can_check=computed(()=>{
    return Boolean(user_answer.value)
})
const check_answer=()=>{
    if (!can_check.value) {
        return
    }
    show_answer.value=true
    cur_question.value.user_answer=user_answer.value
    submit_answer()
}
const can_go_previous=computed(()=>{
    const r= cur_index.value>0
    console.log('Can go previous:',r)
    return r
})
const go_previous=()=>{
    if (!can_go_previous.value) {
        return
    }
    cur_index.value--
    pick_question(cur_index.value)
}
const can_go_next=computed(()=>{
    const total_length=props.questions.length
    return cur_index.value<total_length
})
const go_next=()=>{
    if (!can_go_next.value) {
        return
    }
    cur_index.value++
    pick_question(cur_index.value)
}
</script>

<template>
    <el-scrollbar
        class="exam-container"
        height="100%"
        v-loading="is_loading"
        element-loading-background="#333"
    >
        <!-- <div class="exam-container"> -->
        <div class="question-container">
            <div class="question-number label-box horiz">
                <span class="label">{{cur_question.number}}</span>
                <span class="value">{{cur_question.question_type==1?'单选题':'多选题'}}</span>
            </div>
            <div class="question-title label-box vert">
                <span class="label">{{'题干'}}</span>
                <span class="value">{{cur_question.title}}</span>
            </div>
            <div class="option-container">                
            <el-radio-group
                class="options single"
                v-if="cur_question.question_type == 1"
                v-model="selected_option"
                text-color="#fff"
                :disabled="show_answer"
            >
                <div class="option" v-for="option in cur_question.options" :key="option.key">
                    <el-radio-button class="option-label" :label="option.key" border></el-radio-button>
                    <span class="option-value">{{ option.value }}</span>
                </div>
            </el-radio-group>
            <div class="options multiple" v-else>
                <div class="option" v-for="option in cur_question.options" :key="option.key">
                    <el-checkbox-button
                        v-model="selected_options"
                        :label="option.key"
                        class="option-label"
                        :disabled="show_answer"
                    ></el-checkbox-button>
                    <span class="option-value">{{ option.value }}</span>
                </div>
            </div>
                
            </div>
        </div>
        <div class="button-panel">
            <a 
                class="pre btn" 
                type="primary" 
                @click="go_previous" 
                :class="{disabled:!can_go_previous}">上一题</a>
            <a v-show="!show_answer" 
                class="submit btn" 
                type="primary" 
                @click="check_answer"
                :class="{disabled:!can_check}">确定</a>
            <a class="next btn" 
                type="primary" 
                @click="go_next"
                :class="{disabled:!can_go_next}">下一题</a>
        </div>
        <div class="result-container" v-show="show_answer">
            <div class="exam-result">
                <div class="question-answer label-box horiz">
                    <span class="label">正确答案</span>
                    <span class="value">{{ cur_question.answer }}</span>
                </div>
                <div class="user-answer label-box horiz" :class="{ right: is_answer_right }">
                    <span class="label">你的答案</span>
                    <span class="value">{{ user_answer }}</span>
                </div>
            </div>
            <div class="question-restore label-box vert">
                <span class="label">教材原文</span>
                <span class="value">{{ cur_question.restore }}</span>
            </div>
            <div class="question-explain label-box vert">
                <span class="label">题目解析</span>
                <span class="value">{{ cur_question.explain }}</span>
            </div>
        </div>
        <!-- </div> -->
    </el-scrollbar>
</template>

<style scoped lang="scss">
.exam-container {
    background-color: #333;
    width: 100%;
    border-radius: 5px;
    color: aliceblue;
    align-items: center;
    display: flex;
    flex-direction: column;
}
.question-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.question-number.horiz{
    width: 200px;
}
.question-title.vert {
    // margin-top: 20px;
    .value{
        font-size: 1.2rem;
        font-weight: 900;
    }
}
.option-container{
    width: 100%;
    // margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.option-container .options{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    .option {
        min-width: 200px;
        display: grid;
        grid-template-columns: auto 1fr;
        border: 1px solid dodgerblue;
        border-radius: 5px;
    }
}
.option-value {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 30px;
    padding: 0 10px;
}
.button-panel{
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 48px 0;
}
.btn{
    padding: 5px 0;
    display: inline-block;
    text-decoration: none;
    width: 80px;
    border: 1px solid dodgerblue;
    border-radius: 4px;
    font-weight: 600;
    text-shadow: 1px 1px #333;
    &:hover{
        background-color: dodgerblue;
    }
}

.btn.disabled{
    filter: saturate(0);
    background-color: gray;
}
.result-container{
    padding: 0 20px;
}
.exam-result {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: 20px;

}

.horiz{
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 24px;
    width: 160px;
    span {
        height: 24px;
        line-height: 24px;
        font-weight: 600;
        color: aliceblue;
    }
}
.label-box {
    --label-color: dodgerblue;
    border: 1px solid var(--label-color);
    border-radius: 5px;

    overflow: hidden;

    .label {
        background-color: var(--label-color);
        text-shadow: 1px 1px #333;
        font-weight: 600;
    }
}
.user-answer {
    --label-color: darkred;
    &.right {
        --label-color: darkgreen;
    }
}
.question-answer {
    grid-column: 2;
}
.vert{
    display: grid;
    grid-template-rows: 24px auto;
    margin-top: 24px;
    .value{
        padding: 5px 10px;
        text-align: left;
    }
}
</style>
